<template>
    <div>
        <h1></h1>
        <h2>{{state2}}</h2>
        <button @click="update">jian</button>
    </div>
    
</template>
<script lang="ts">
import {defineComponent, onBeforeMount, onMounted, reactive, readonly, ref , shallowReactive, shallowReadonly, shallowRef, toRefs} from 'vue'

export default defineComponent({
    name:"建哥",
    setup() {
        const state = {
            name:"佐助",
            age:18,
            car:{
                name:"奔驰"
            }
        }

        //readonly 将一个对象的每一个属性 设置成为只读属性
        // let state2 = readonly(state);

        //? 浅只读  只能设置对象单层的数据为只读属性
        const state2 = shallowReadonly(state)

        let state3 = readonly(state);

        function update(){
            state2.car.name += "=="
        }
        return {
            state2
        }
    },
    directives:{
        jian(el,bind){
        }
    }
})

</script>
